<template>
  <link rel="stylesheet" href="/assets/css/indent-details.css" />

  <!-- 导航栏 -->
  <van-nav-bar title="订单评价" left-text="返回" right-text="提交评价" left-arrow right-arrow @click-left="back"
    @click-right="comment" fixed z-index="100" v-if="info.order.status == 3">
    <template #right>
      <van-icon name="good-job-o" size="25" />
    </template>
  </van-nav-bar>


  <van-nav-bar title="订单评价" left-text="返回" left-arrow @click-left="back" fixed z-index="100"
    v-if="info.order.status > 3" />

  <div class="comment">
    <van-swipe-cell v-for="(product, key) in info.product">
      <van-card :title="'商品名称：' + product.info.name" :thumb="product.info.cover_cdn">
        <template #tags>
          <van-rate v-if="info.order.status == 3" v-model="product.rate" />
          <van-rate v-if="info.order.status > 3" v-model="product.rate" readonly />
        </template>

        <template #price>
          <!-- 商品评价 -->
          <van-field v-if="info.order.status == 3" v-model="product.remark" rows="2" name="remark" type="textarea"
            placeholder="请输入商品评价" maxlength="500" show-word-limit />

          <van-field v-if="info.order.status > 3" v-model="product.remark" rows="2" name="remark" type="textarea"
            placeholder="请输入商品评价" maxlength="500" show-word-limit readonly />
        </template>
      </van-card>
    </van-swipe-cell>

     <van-field name="thum" label="文件上传">
        <template #input>
            <!-- 文件上传的组件 -->
            <van-uploader v-model="thum" :max-count="1" />
        </template>
    </van-field>
  </div>
</template>

<script>
  export default {
    name: 'OrderComment',
    created() {
      this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0

      this.OrderData()

    },
    data() {
      return {
        thum:[],
        orderid: 0,
        LoginUser: this.$cookies.get('LoginUser'),
        info: {
          order: {
            express: {}
          },
          address: {},
          product: [],
          contact: ''
        }
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      //订单数据
      async OrderData() {
        //组装数据
        var data = {
          userid: this.LoginUser.id,
          orderid: this.orderid
        }

        var result = await this.$api.OrderInfo(data)

        if (result.code == 0) {
          //提醒信息
          this.$notify({
            type: 'error',
            message: result.msg,
            duration: 1000,
            onClose: () => {
              //返回上一个界面
              this.$router.go(-1)
            }
          })
          return false
        }

        this.info = result.data
      },
      //提交评价
      async comment() {
        var data = {
          orderid: this.info.order.id,
          ids: [],
          rate: [],
          remark: [],
          userid: this.LoginUser.id,
        }

        //如果有选择图片就上传
        if (this.thum[0].file) {
            data.thum = this.thum[0].file
        }
        

        ///重新组装数据
        this.info.product.map((product) => {
          data.ids.push(product.id)
          data.rate.push(product.rate)
          data.remark.push(product.remark)
        })

        var result = await this.$api.OrderComment(data)


        if (result.code == 0) {
          //提醒信息
          this.$notify({
            type: 'error',
            message: result.msg,
            duration: 1000,
          })
        } else {
          //提醒信息
          this.$notify({
            type: 'success',
            message: result.msg,
            duration: 1000,
            onClose: () => {
              //返回上一个界面
              this.$router.go(-1)
            }
          })
        }

      }
    }
  }
</script>


<style>
  .comment {
    margin-top: 4em;
    height: 96vh;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .van-card__header {
    align-items: top;
  }

  .van-card__price {
    width: 100%;
  }
</style>